import { ref, toRaw } from 'vue'
import HistoryCard from '@/components/index/history/historyCard.vue'
import HistoryLogs from '@/components/index/history/historyLogs.vue'
import { storeToRefs } from 'pinia'
import { useCardStore } from '@/stores/cardStore'
import { useHistoryStore } from '@/stores/historyStore'
import { useModalStore } from '@/stores/modalStore'
import { useMainIndexStore } from '@/stores/mainIndexStore'
import useFontImg from '@/utils/fontImg'
import { useAsyncAxios } from '@/utils/asyncFuncStore'
import type { CardData, ErrorData } from '@/types/loginType'
export default function () {
  // 修改contentTitle
  const { assignTitle } = useMainIndexStore()
  const { imgLogs } = useFontImg()
  assignTitle(imgLogs)

  const { historyLogsData } = storeToRefs(useHistoryStore())
  const { assignCardData } = useCardStore()

  // class 样式控制
  const firstTime = historyLogsData.value[0].time
  const actived = ref(firstTime !== undefined ? firstTime : '0')

  // 获取相关信息， 功能函数
  const { getTimeArticles } = useAsyncAxios()
  async function logsClicked(time: string) {
    // 切换样式显示
    actived.value = time
    // 获取 id 列表
    const ids = historyLogsData.value.find((item) => item.time === time)?.data
    if (ids !== undefined && ids.length !== 0) {
      // 点击时获取详细数据
      const { status, data } = await getTimeArticles(ids)
      if (status === 200) {
        // 更改card 值
        assignCardData(data as CardData[])
      } else {
        const { changeData } = useModalStore()
        changeData({ status: status, data: data as ErrorData })
      }
    }
  }

  return {
    HistoryCard,
    HistoryLogs,
    historyLogsData,
    actived,
    logsClicked
  }
}
